import React, { useState } from "react";
import { Link } from "react-router-dom";
import { FaBars, FaEnvelope, FaPhone, FaMapMarkerAlt, FaFacebookF, FaTwitter, FaLinkedinIn, FaInstagram } from "react-icons/fa";
import Header from './Header';

interface ToolCardProps {
    icon: React.ReactNode;
    title: string;
    content: string;
}

interface SocialProps {
    icon: React.ReactNode;
    href: string;
    label: string;
}

const ContactInfo: React.FC<ToolCardProps> = ({ icon, title, content }) => (
  <div className="flex items-center mb-4">
    <div className="text-2xl mr-4">{icon}</div>
    <div>
      <h4 className="font-semibold text-left text-[20px]">{title}</h4>
      <p>{content}</p>
    </div>
  </div>
);

const SocialLink: React.FC<SocialProps> = ({ href, icon, label }) => (
  <a
    href={href}
    target="_blank"
    rel="noopener noreferrer"
    className="text-white hover:text-opacity-80 transition-colors"
    aria-label={label}
  >
    {icon}
  </a>
);

const ContactPage = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: "",
  });

  const handleChange = (e: any) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e: any) => {
    e.preventDefault();
    // Here you would typically send the form data to a server
    console.log("Form submitted:", formData);
    // Reset form after submission
    setFormData({ name: "", email: "", message: "" });
  };

  return (
    <div className="min-h-screen flex flex-col">
      <Header />

      <main className="container mx-auto px-4 py-12 flex-grow">
        <section className="text-center mb-16">
          <h2 className="text-5xl md:text-7xl font-bold mb-6">Contact Us</h2>
          <p className="text-xl md:text-2xl mb-10">
            We'd love to hear from you
          </p>
        </section>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
          <section>
            <h3 className="text-3xl font-semibold mb-6 text-left">
              Get in Touch
            </h3>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label
                  htmlFor="name"
                  className="block text-[20px] mb-2 text-left"
                >
                  Name
                </label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  value={formData.name}
                  onChange={handleChange}
                  required
                  className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
                />
              </div>
              <div>
                <label
                  htmlFor="email"
                  className="block text-[20px] mb-2 text-left"
                >
                  Email
                </label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  value={formData.email}
                  onChange={handleChange}
                  required
                  className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
                />
              </div>
              <div>
                <label
                  htmlFor="message"
                  className="block text-[20px] mb-2 text-left"
                >
                  Message
                </label>
                <textarea
                  id="message"
                  name="message"
                  value={formData.message}
                  onChange={handleChange}
                  required
                  rows={4}
                  className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
                ></textarea>
              </div>
              <button
                type="submit"
                className="px-6 py-2 bg-white text-primary font-semibold rounded-full hover:bg-opacity-90 transition-colors"
              >
                Send Message
              </button>
            </form>
          </section>

          <section>
            <h3 className="text-3xl font-semibold mb-6 text-left">Contact Information</h3>
            <div className="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6">
              <ContactInfo
                icon={<FaEnvelope />}
                title="Email"
                content="xksaturn@gmail.com"
              />
              <ContactInfo
                icon={<FaPhone />}
                title="Twitter"
                content="@MasterHXK"
              />
              <ContactInfo
                icon={<FaMapMarkerAlt />}
                title="Address"
                content="Pro Tools Street"
              />
            </div>
            <div className="mt-8">
              <h4 className="text-xl font-semibold mb-4 text-left">Follow Us</h4>
              <div className="flex space-x-4">
                <SocialLink
                  href="https://facebook.com/toolbox"
                  icon={<FaFacebookF size={24} />}
                  label="Facebook"
                />
                <SocialLink
                  href="https://twitter.com/MasterHXK"
                  icon={<FaTwitter size={24} />}
                  label="Twitter"
                />
                <SocialLink
                  href="https://linkedin.com/company/toolbox"
                  icon={<FaLinkedinIn size={24} />}
                  label="LinkedIn"
                />
                <SocialLink
                  href="https://instagram.com/toolbox"
                  icon={<FaInstagram size={24} />}
                  label="Instagram"
                />
              </div>
            </div>
          </section>
        </div>
      </main>

      <footer className="container mx-auto px-4 py-6 text-center">
        <p>&copy; 2024 Pro Tools. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default ContactPage;
